import React from 'react'
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space ,message,Modal,Input,Select} from 'antd';
import lay from '../../assets/css/layout.module.css'
import '../../assets/css/my.css'
import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
// 从 localStorage 中读取并解析数据
const myuser = JSON.parse(localStorage.getItem('user'))
console.log(myuser);

const items = [
    {
      label: '更改密码',
      key: '0',
    },
    {
      label: '更改手机号',
      key: '1',
    },
    {
        label: '退出登录',
        key: '2',
      }
    
  ];
  const phoneChoose = [
    {label:'移动',value:'移动'},
    {label:'联通',value:'联通'},
    {label:'电信',value:'电信'}
  ]
export default function Login() {
  let [pwd,setPwd] = useState(false)
  let [phone,setPhone] = useState(false)
  let [yanzhengma,setYanzhengma] = useState('获取验证码')
  let yan = React.createRef()

  let [oldpwd,setOldpwd] = useState('')
  let [newpwd,setNewpwd] = useState('')
  let [nnewpwd,setNnewpwd] = useState('')

  let [newPhone,setNewPhone] = useState('')
  let [yanma,setYanma] = useState('')
  let [password,setPasseord] = useState('')

  let [user,setUser] = useState(myuser)
  let nav = useNavigate()
  const onClick = ({ key }) => {
    console.log(typeof key);
    if(key=='0'){
      setPwd(true)
    }else if(key=='1'){
      setPhone(true)
    }else{
      nav('/login')
    }
  };
  
  //验证码按钮文字状态
 const getCodeState=()=>{
  setYanzhengma('60S');
  let s = 60;
  let clear = setInterval(() => {
      s--;
      setYanzhengma(s + 'S');
      if (s <= 0) {
       clearInterval(clear);
       setYanzhengma('获取验证码');

     }
   }, 1000);
}

// 确认修改密码
const changePwd = ()=>{
  if(oldpwd == myuser.password){
    if(newpwd==nnewpwd && newpwd && nnewpwd){
      axios.post('http://172.16.17.115:8080/updateuserPwd',{
        phone:myuser.telphone,
        newPassword:newpwd
    }).then(res=>{
      myuser.password = newpwd  //本地存储新的密码
      console.log(myuser);
      setUser(myuser)
      
      localStorage.setItem('user',JSON.stringify(myuser))
      message.open({
        type:'success',
        content:'修改成功',
        duration:1
      })
      setOldpwd('')
      setNewpwd('')
      setNnewpwd('')
      setTimeout(() => {
        setPwd(false)
      }, 1050);
    })
    }else{
      message.open({
        type:'error',
        content:'两次密码输入不一致',
        duration:1
      })
    }
  }else{
    message.open({
      type:'error',
      content:'原密码输入错误',
      duration:1
    })
  }
}

// 更改手机号
const changePhone = ()=>{
 let id = user.id
 console.log(id,newPhone);

 if(newPhone && yanma && password){
  if(password == user.password){
      axios.post('http://172.16.17.115:8080/updatePhone',{
        id:id,
        phone:newPhone,
    }).then(res=>{
      myuser.telphone = newPhone  //本地存储新的密码
      console.log(myuser);
      setUser(myuser)  
      localStorage.setItem('user',JSON.stringify(myuser))  // 更新本地存储和状态
      message.open({
        type:'success',
        content:'修改成功',
        duration:1
      })
      setTimeout(() => {
        setPhone(false)
      }, 1050);
      setNewPhone('')
      setYanma('')
      setPasseord('')
    })
    }else{
      message.open({
        type:'error',
        content:'密码输入错误',
        duration:1
      })
    }
  }else{
    message.open({
      type:'error',
      content:'请输入完整数据',
      duration:1
    })
  }
}
  return (
    <>
      <Dropdown menu={{ items,onClick }} trigger={['click']} className={lay.down}>
        <a onClick={(e) => e.preventDefault()}>
          <Space className={lay.login}>
              {myuser.telphone}
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>

    {/* 修改密码 */}
    <Modal
      width={440}
      open={pwd}
      footer={false}
      onCancel={()=>{
        // 点击取消按钮后的操作
        setPwd(false)
      }}
    >
      <div className='changepwd'>
          <div className="title">修改密码</div>
          <div className='changepwd-content'>
            <Input.Password type="text" value={oldpwd} onChange={(e)=>setOldpwd(e.target.value)} placeholder='输入旧密码'/>
            <Input.Password type="text" value={newpwd} onChange={(e)=>setNewpwd(e.target.value)} placeholder='输入新密码，包含数字和字母的8～20位密码'/>
            <Input.Password type="text" value={nnewpwd} onChange={(e)=>setNnewpwd(e.target.value)} placeholder='确认新密码'/>
          </div>
          <div className="save" onClick={()=>{
            changePwd()
            
          }}>确认修改</div>
      </div>
    </Modal>


    {/* 修改手机号 */}
    <Modal
      width={440}
      open={phone}
      footer={false}
      onCancel={()=>{
        // 点击取消按钮后的操作
        setPhone(false)
      }}
    >
      <div className='changephone'>
          <div className="title">更换手机号</div>
          <form action="" className='content'>
                <div className="phone">
                  <Select
                    style={{
                      width: 120,
                      height:36
                    }}
                    allowClear
                    options={phoneChoose}
                    placeholder="中国+86"
                  />
                  <input value={newPhone} onChange={(e)=>setNewPhone(e.target.value)} type="text" placeholder='请输入手机号'/>
                </div>

                <label htmlFor="" className='getyan phone' >
                  <input type="text" placeholder='请输入验证码' value={yanma} onChange={(e)=>setYanma(e.target.value)} />
                  <span ref={yan} onClick={()=>{ yan.current.style.background = '#f4f6fa';
                                                yan.current.style.fontSize = '14px';
                                                yan.current.style.color = '#707481';;getCodeState()}}>{yanzhengma}</span>
                </label>

                <label htmlFor="" className='pwd' >
                  <input type="text" placeholder='请输入登录密码'  value={password} onChange={(e)=>setPasseord(e.target.value)} />
                </label>
          </form>
          <div className="save" onClick={()=>{
            changePhone()
           
          }}>确认修改</div>
      </div>
    </Modal>
    </>
  )
}
